<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs>
        <el-tab-pane label="组织结构">
          <page-tools :show-before="true">
            <span slot="before">共{{ total }}个部门</span>
          </page-tools>
          <!-- 实现页面的基本布局 -->
          <el-card class="tree-card structureRow">
            <!-- 用了一个行列布局 -->
            <!-- 缺少treeNode -->
            <!-- <tree-tools :tree-node="company" /> -->
            <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
            <el-tree :data="departs" :props="defaultProps" default-expand-all>
              <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
              <!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
              <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
              <tree-tools slot-scope="{ data }" :tree-node="data" @delDepts="getStructure" @addDepts="addDepts" @editDepts="editDepts" />
            </el-tree>
            <add-dept ref="addDept" :show-dialog="showDialog" :tree-node="node" @closepop="closepop" @addDepts="getStructure" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="组织信息">
          <el-alert
            title="物联网俱乐部基本资料"
            type="info"
            show-icon
            :closable="false"
          />
          <el-row>
            <el-col :span="14">
              <el-form label-width="120px" style="margin-top:50px">
                <el-carousel :interval="5000" arrow="always" style="width:100%;margin:50px;">
                  <!-- <el-carousel-item v-for="(item,index) in orgImg" :key="index">
                    <div style="width:100%;height:330px;overflow:hidden;">
                      <el-image :src="item" style="width:100%;height:auto;" />
                    </div>
                  </el-carousel-item> -->
                </el-carousel>
                <el-form-item style="width:100%;" label="名称">
                  <el-input v-model="orgForm.orgname" readonly />
                </el-form-item>
                <el-form-item style="width:100%;" label="地址">
                  <el-input v-model="orgForm.address" readonly />
                </el-form-item>
                <el-form-item style="width:100%;" label="邮箱">
                  <el-input v-model="orgForm.emails" readonly />
                </el-form-item>
                <el-form-item style="width:100%;" label="备注">
                  <el-input v-model="orgForm.tips" type="textarea" :rows="5" readonly />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8" :offset="2">
              <div style="height: 500px;margin:50px;">
                <el-steps direction="vertical" :active="3">
                  <el-step title="物联网班" />
                  <el-step title="物联网俱乐部" description="面向全校的开发俱乐部" />
                  <el-step title="物联网 + iot云平台" description="开放性实验室 + 面向全校的功能性云平台" />
                </el-steps>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools'
import AddDept from './components/add-dept' // 引入新增部门组件
import { getStructure } from '@/api/structure'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      total: '',
      // company: { name: '物联网俱乐部', level: '级别', head: '负责人' }, // 就是头部的数据结构
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      showDialog: false, // 显示窗体
      node: {},
      // orgImg: [require('@/assets/orgImg1.jpg'), require('@/assets/orgImg2.jpg'), require('@/assets/orgImg3.jpg')],
      orgForm: {
        tips: '岭南师范学院物联网俱乐部作为全校首个以俱乐部形式创办的大型学习开发平台，原本只有18级物联网班的一个组织如今将近四百人。在人员数量日渐增长的背景下，管理人员等问题显得日渐困难，俱乐部电子开发器件的租借常常得不到妥善的处理。为了解决这类问题，让人员管理更加智能化数据化以及可视化，用一个可视化的平台来区区分每个用户的角色权限，普通用户可以进行电子开发板等器件的租借，以及让有权限的管理员管理平台。为此这款基于前后端分离开发的iot班级云平台得以出现。',
        address: '岭南师范学院/综合楼B',
        emails: '1308999267@qq.com',
        orgname: 'iot云平台'
      }
    }
  },
  created() {
    this.getStructure() // 调用自身的方法
  },
  methods: {
    async getStructure() {
      const { tree, total } = await getStructure()
      this.departs = tree // 需要将其转化成树形结构
      this.total = total
    },
    addDepts(node) {
      this.showDialog = true // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
      this.node.title = '添加部门'
    },
    closepop() {
      this.showDialog = false
    },
    editDepts(node) {
      this.showDialog = true // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
      this.node.title = '编辑部门'
      this.$refs.addDept.updateFormData(node)
    }
  }
}
</script>

<style>
</style>
